<template>
	<view class="page-search">
		<u-navbar :is-back="true" title="" :border-bottom="false">
			<view class="slot-wrap">
				<u-search shape="round"
				v-model="keywords"
				@custom="custom(keywords)"
				@search = "custom(keywords)"
				@clear = "searchResults = []"
				></u-search>
			</view>
		</u-navbar>	
		<block v-if="searchResults.length==0">
			<view class="lable">
				大家都在搜
			</view>
			<view class="tag u-flex u-flex-wrap">
				<block v-for="(item,index) in peopleSearchList" :key="item.id" >
					<u-tag class="u-margin-right-12 u-margin-bottom-24" shape="circle"
					:text="item.keywords" v-if="item.keywords"
					type="info" @click="custom(item.keywords)"/>
				</block>
			</view>
			<view class="lable u-flex u-row-between">
				<view class="">
					搜索历史
				</view>
				<view class="" @click="show = true">
					<u-icon name="changyonggoupiaorenshanchu" custom-prefix="custom-icon" size="40" color="#999" style="margin-right: 16rpx;"></u-icon>
				</view>
			</view>
			<view class="history-wrap">
				<view class="history-list u-flex u-col-center u-margin-bottom-20" v-for="(item,index) in histories" :key="index" @click="custom(item)">
					<u-icon name="shizhong" custom-prefix="custom-icon" size="30" color="#999" style="margin-right: 16rpx;"></u-icon> 
					{{item}}
				</view>
			</view>
		</block>
		<view class="history-wrap search-result" v-else>
			<view class="history-list u-flex u-col-center u-margin-bottom-20" v-for="(item,index) in searchResults" :key="item.id" @click="goDetail(item)"> 
				<span class="history-list-type u-margin-right-20">{{item.type}}</span>
				<span class="history-list-title u-flex-1">{{item.title}}</span>
			</view>
		</view>
		<u-modal v-model="show" content="确定删除吗？" show-cancel-button @confirm="confirm"></u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {commonGet} from "@/api/commonapi.js"
	export default {
		data() {
			return {
				keywords:"",
				historyList:[],
				show:false,
				searchResults:[],
				peopleSearchList:[]
			}
		},
		onLoad(options) {
			this.historyList = JSON.parse(this.$store.state.keywords)
			if(JSON.stringify(options) !== "{}"){
				this.custom(options.keywords)
			}
			this.getPeopleSearchList()
		},
		watch:{
		},
		computed:{
			histories(){
				return [...this.historyList].reverse()
			}
		},
		methods: {
			getPeopleSearchList(){
				let _this = this
				let query = {
					ak:_this.$store.state.token,
					cmd:"seo_list_proc",
					para:JSON.stringify({})
				}
				commonGet(query,({Data:{Datas1}})=>{
					_this.peopleSearchList = Datas1
				})
			},
			custom(keywords){
				let _this = this
				_this.keywords = keywords
				let query = {
					ak:_this.$store.state.token,
					cmd:"seo_list_proc",
					para:JSON.stringify({
						searchfull:keywords
					})
				}
				_this.saveSearchHistory()
				if(_this.$u.trim(_this.keywords) == ""){
					_this.$refs.uToast.show({title: '请输入关键字'})
				}else{
					commonGet(query,({Data:{Data}})=>{
						if(Data.length>0){
							_this.searchResults = Data
						}else{
							_this.$refs.uToast.show({title: '未搜索到相关内容'})
						}
					})
				}
			},
			saveSearchHistory(){
				const set = new Set(this.historyList)
				set.delete(this.keywords)
				if(this.keywords){
					set.add(this.keywords)
				}
				this.historyList = Array.from(set)
				this.$store.commit('saveSearchHistory',JSON.stringify(this.historyList))
			},
			confirm(){
				this.historyList = []
				this.$store.commit('removeSearchHistory')
			},
			goDetail(item){
				let _this = this
				switch (item.spageid){
					case "3309": _this.$u.route('', {id: item.id});break;
					case "3314": _this.$u.route('/pages/HomeLnner/DeviceDetails/DeviceDetails', {id: item.id});break;
					case "2153": _this.$u.route('/pages/circle/circle-detail/circle-detail', {id: item.id});break;
					case "3307": _this.$u.route('/pages/index/homeInfo-detail/homeInfo-detail', {id: item.id});break;
					case "3305": _this.$u.route('/pages/HomeLnner/AtlasDetails/AtlasDetails', {id: item.id});break;
					case "3310": _this.$u.route('/pages/HomeLnner/practice/examination-detail/examination-detail', {id: item.id});break;
					case "3312": _this.$u.route('', {id: item.id});break;
					case "3315": _this.$u.route('', {id: item.id});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.slot-wrap{
	width: 100%;
	padding-right: 30rpx;
}
.lable{
	padding:46rpx 30rpx 28rpx 30rpx;
	font-size: 32rpx;
	font-weight: bold;
}
.tag{
	padding: 0 30rpx;
}
.u-mode-light-info{
	border:none;
	background-color: #f7f7f7;
}
.history-wrap{
	padding: 0 30rpx;
	font-size: 28rpx;
	.history-list-type,
	.history-list-title{
		display: inline-block;
	}
	.history-list-title{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
.search-result{
	margin-top: 30rpx;
}
</style>
